<template>
  <div>
    <n-carousel
      direction="vertical"
      dot-placement="right"
      autoplay
      style="width: 100%; height: 90vh"
    >
      <div class="test">
        <img
          class="carousel-img"
          src="http://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/storage/1/1/%E7%94%9F%E6%88%90%E4%B8%80%E5%BC%A0%E5%8A%A8%E6%BC%AB%E7%9A%84%E5%9C%B0%E5%9B%BE.png"
        />
        <div class="bottomTitle">
          <div class="bottomTitle-1">地图：可视化界面呈现</div>
        </div>
      </div>

      <div class="test">
        <img
          class="carousel-img"
          src="https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F5bb4db936f2e4527a3e36d49404a2deb_%E7%94%9F%E6%88%90%E4%B8%80%E5%BC%A0%E5%8A%A8%E6%BC%AB%E7%9A%84%E5%9C%B0%E5%9B%BE%20(1).png"
        />
        <div class="bottomTitle">
          <div class="bottomTitle-1">地图：数据协作</div>
        </div>
      </div>

      <div class="test">
        <img
          class="carousel-img"
          src="https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F35df0a70fa0345098b177918305c73df_%E7%94%9F%E6%88%90%E4%B8%80%E5%BC%A0%E5%8A%A8%E6%BC%AB%E7%9A%84%E5%9C%B0%E5%9B%BE%20(2).png"
        />
        <div class="bottomTitle">
          <div class="bottomTitle-1">数据市场：拓展边界</div>
        </div>
      </div>

      <div class="test">
        <img
          class="carousel-img"
          src="https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F9cfbf9b4a3234c82b7a33c8f41b919c3_%E7%94%9F%E6%88%90%E4%B8%80%E5%BC%A0%E5%8A%A8%E6%BC%AB%E7%9A%84%E5%9C%B0%E5%9B%BE%20(3).png"
        />
        <div class="bottomTitle">
          <div class="bottomTitle-1">分析：获得洞察</div>
        </div>
      </div>

      <template #dots="{ total, currentIndex, to }">
        <ul class="custom-dots">
          <li
            v-for="index of total"
            :key="index"
            :class="{ ['is-active']: currentIndex === index - 1 }"
            @click="to(index - 1)"
          />
        </ul>
      </template>
    </n-carousel>
  </div>
</template>

<script lang="ts" setup>
import { ArrowBack, ArrowForward } from "@vicons/ionicons5";
// import { defineComponent } from "vue";
</script>

<style lang="scss" scoped>
.test {
  height: 90vh;
  // border: 1px solid green;
  width: 90%;
  display: flex;
  flex-direction: column;

  .carousel-img {
    width: 100%;
    // height: 640px;
    height: 80vh;
    // object-fit: cover;
    // background-size: 100% 100%;
    margin-top: 5px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
    // border: 1px solid red;
  }

  .bottomTitle {
    width: 100%;
    height: 90%;
    // border: 1px solid red;
    display: flex;
    align-items: center;

    .bottomTitle-1 {
      // color: white;
      color: black;

      font-size: 24px;
      font-weight: bold;
      margin-left: 30px;
    }
  }
}

.custom-dots {
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 0;
  position: absolute;
  bottom: 30%;
  // left: 20px;
  right: 20px;
  // border: 1px solid red;
}

.custom-dots li {
  display: inline-block;
  // width: 12px;
  // height: 4px;
  height: 50px;
  width: 4px;
  // margin: 0 3px;
  margin: 10px;
  border-radius: 4px;
  // background-color: rgba(255, 255, 255, 0.4);
  // background-color: gray;
  background-color: #dee1e6;
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  // width: 40px;
  height: 80px;
  // background: #fff;
  // background-color: rgb(128, 128, 128,.5);
  background-color: #091e42;
}

.dark .test .bottomTitle .bottomTitle-1 {
  // color: white;
  color: #c5beb3;
}

.dark .custom-dots li {
  background-color: rgba(255, 255, 255, 0.4);
}

.dark .custom-dots li.is-active {
  background: #fff;
}
</style>
